<template>

    <n-table class="min-h-64 min-w-48">
        <thead>
        <tr>
            <th>指令列表</th>
        </tr>
        </thead>
        <tbody @dragover.prevent @drop="onDrop">
        <tr v-for="(item, index) in cmdList">
			<!--已经处于容器内的节点互相拖拽是排序-->
            <td draggable="true">
				{{ index + 1 }}.{{ item }}
				<n-button>
					<n-icon :component="Delete"></n-icon>
				</n-button>
			</td>
        </tr>
        <tr v-if="cmdList.length < 1">
            <td>请添加指令</td>
        </tr>
        </tbody>
    </n-table>
</template>

<script setup>
import {getCurrentInstance, ref, watch} from "vue"
import {useDraggable, VueDraggable} from 'vue-draggable-plus'
import {Delete} from '@vicons/carbon'
const preNode = ref(null)
const {emitter} = getCurrentInstance()?.proxy;


emitter.on("node", (node) => {
    // 待选区
    console.log(node)
    preNode.value = node
})
const onDrop = (data) => {
    // 拖拽添加指令
    console.log(preNode)
    cmdList.value.push(preNode.value.whateverLabel)
}
const cmdList = ref([])
</script>

<style scoped>

</style>
